<template>
	<view>
		测试
	</view>
</template>

<script>
	
	export default {
		name:"Login",
		data() {
			return {
				
			};
		},
		//进入此组件之前
		  beforeCreate() {
		    console.group("beforeCreate--实例创建前状态");
		    console.log(this.$el); //el  :undefined
		    console.log(this.$data); //data  :undefined
		    console.log(this.msg); //message  :undefined
		  },
		  //进入此组件只会执行一次
		  created() {
		    //   想在created获取到dom 可使用异步
		    this.$nextTick(() => {
		      console.log(this.$el); //可以得到 但是执行会在mounted最后一个执行
		    });
		    console.group("created--实例创建完成状态"); //el  :undefined
		    console.log(this.$el);//无数据
		    console.log(this.$data);//有数据
		    console.log(this.msg);//更改测试
		  },
		  beforeMount() {
		    console.group("beforeMount--挂载之前的状态");
		    console.log(this.$el); //有dom
		    console.log(this.$data); //有数据
		    console.log(this.msg); //更改测试
		  },
		  mounted() {
		    console.group("mounted--已经挂载的状态");
		    console.log(this.$el); //<div class="period"><button>change</button> <span>测试</span></div>
		    console.log(this.$data); //{__ob__: Observer}
		    console.log(this.msg); //测试
		  },
		  //数据更新前
		  beforeUpdate() {
		    console.group("beforeUpdate--数据更新前的状态");
		    console.log(this.$el.innerHTML);
		    console.log(this.$el);
		    console.log(this.$data);
		    console.log(this.msg);
		  },
		  //数据更新后
		  updated() {
		    console.group("updated--数据更新完成时状态");
		    console.log(this.$el.innerHTML);
		    console.log(this.$el);
		    console.log(this.$data);
		    console.log(this.msg);
		  },
		  activated() {
		    //进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等
		    console.group("activated-- keep-alive 组件激活时调用");
		    console.log(this.$el);
		    console.log(this.$data);
		    console.log(this.msg);
		  },
		  deactivated() {
		    console.group("deactivated-- keep-alive 停用时调用");
		    console.log(this.$el);
		    console.log(this.$data);
		    console.log(this.msg);
		  },
		  //组件销毁之前，离开此组件之前
		  beforeDestroy() {
		    console.group("beforeDestroy-- vue实例销毁前的状态");
		    console.log(this.$el);
		    console.log(this.$data); //
		    console.log(this.msg);
		  },
		  //组件销毁之后，离开此组件之后
		  destroyed() {
		    console.group("destroyed-- vue实例销毁完成时调用");
		    console.log(this.$el);
		    console.log(this.$data);
		    console.log(this.msg);
		    alert(2);
		  }
	}
</script>

<style>

</style>